@import "constant";

a{
    text-decoration: none!important; 
}


.user-box{
    .display-bar-box{
        margin-top: 100px;
        display: flex;
        .display-bar-item{
            width: 0.6vw;
            height: 4vw;
            background-color: @primaryColor;
            display: inline-block;
            vertical-align: top!important;
        }
        a{
            font-size: 2.4vw;
            line-height: 4vw ;
            margin-left: 18px;
        }
    }


    .user-information-box{
        width: 100%;
        margin-top: 20px;
        display: flex;
        .user-logo-box{
            width: 60px;
            height: 60px;
            overflow: hidden;
            border-radius: 50%;
            img{
                width: 60px;
                height: 60px;
            }
        }
    
        .user-browse-edit-box{
            margin-left: 16px;
            display: flex;
            justify-content: space-between;
            width: 100%;
            a{
                display: block;
            }
            .user-browse-box{
                display: flex;
                flex-direction: column;
                justify-content: space-evenly;
                .user-font{
                    color: rgb(56, 55, 55);
                    font-size: 16px;
                }
                .browse-font{
                    color: #ccc;
                    font-size: 12px;
                }
            }
            .user-edit-del-box{
                display: flex;
                flex-direction: column;
                a{
                    font-size: 12px;
                    color: rgb(39, 38, 38);
                }
            }
    
        }
    }

    .image-box{
        margin-top: 26px!important;
        display: flex;
        justify-content: center;
        width: 100%;
        img{
            width: 54vw;
            height: 32vw;
        }
    }

    .font-information-box{
        margin: 16px 0 58px;
        display: block;
        color: #5d5d5d;
    }

    .user-comment-box{
        display: flex;
        margin-bottom: 20px;
        textarea{
            width: 100%;
            height: 90px;
            resize: none;
            text-indent: 1em;
            color: #8f8f8f;
            background-color: #fafafa;
            outline: none;
            border: 1px solid #ccc;
            border-radius: 5px;
        }
    }

    .post-comments-btn-box{
        display: flex;
        justify-content: end;
        width: 100%;
        margin-bottom: 40px;
        .post-comments-btn{
            width: 98px;
            height: 34px;
            outline: none;
            border: none;
            background-color: @primaryColor;
            border-radius: 17px;
            color: #fff;
        }
    }

    .all-comments-box{
        width: 100%;
        height: 20px;
        border-left: 4px solid #ec7259;
        margin-bottom: 32px;
        span{
            display: inline-block;
            margin-left: 12px;
        }
    }

    .all-comments-content-box{
        display: flex;
        margin-bottom: 20px;
        .all-comments-logo-box{
            width: 50px;
            height: 50px;
            border-radius: 25px;
            overflow: hidden;
            img{
                width: 50px;
                height: 50px;
            }
        }
        .all-comments-information-box{
            display: flex;
            justify-content: space-between;
            height: 85px;
            border-bottom: 1px solid #ccc;
            width: 100%;
            margin-left: 12px;
            // background-color: red;
            .all-comments-information-left{
                display: flex;
                flex-direction: column;
                justify-content: space-evenly;
                .user-nickname,.user-comment-content{
                    color: #515151;
                }
                .user-comment-time{
                    color: #a2a2a2;
                }
            }
            .all-comments-information-right{
                display: flex;
                flex-direction: column;
                justify-content: end;
                a{
                    color: #ccc;
                }
            }

        }
    }
}



